import React, { Component } from "react";

class Child extends Component {
  state = {
    // count: 1,
    name: "zhangsan",
  };

  // 在创建的时候以及props或者state更新的时候都会执行
  // getDerivedStateFromProps必须要加static关键字
  // getDerivedStateFromProps必须要有state
  // getDerivedStateFromProps还必须return一个state对象或者null
  // 根据一个props的值去得到一个新的state，同时props的值改变的时候state也同时改变
  // 在渲染页面之前改变state的值
  // 不仅可以根据props的值变化而变化，同时又是一个state，所以组件自身也能修改
  // static getDerivedStateFromProps(props, state) {
  //   console.log("getDerivedStateFromProps");
  //   // return null;
  //   return {
  //     count: props.count,
  //   };
  // }
  render() {
    return (
      <>
        <div>child子组件</div>
        {/* <p>count: {this.state.count}</p> */}
        <p>count: {this.props.count}</p>
        <p>name: {this.state.name}</p>
      </>
    );
  }

  // getSnapshotBeforeUpdate必须要配合componentDidUpdate一起使用
  // 在更新之前获取一个快照(记录)
  // getSnapshotBeforeUpdate和componentDidUpdate都是在render之后执行的
  // 它们能获取到的数据是完全一样的
  // 执行getSnapshotBeforeUpdate的时候页面还没有更新
  // 只能传递和旧的dom相关的一些东西
  // 此用法并不常见,只能记录一些例如滚动的dom信息等
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    return 100;
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate", snapshot);
  }
}

export default Child;
